<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>增加小程序信息</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../elementUI/index.css">
    <link rel="stylesheet" href="../../../css/index.css">
</head>

<body>
    <div id="app" class="minWidth">
        <el-form :model="form" ref="contract" :rules="rules" inline-message="true" style="width: 100%">
            <div style="display: flex; height: 85vh; padding-bottom: 100px;">
                <div style="width: 100%; margin-right: 20px;">
                    <div class="table_titel">
                        <div class="titel">小程序配置</div>
                    </div>
                    <el-form-item label="样式名称:">
                        <el-input style="width: 30%;" v-model.trim="StyleName" placeholder="小程序样式名称" />
                    </el-form-item>
                    <el-tabs type="border-card">
                        <el-tab-pane label="商城首页">
                            <div class="table_titel">
                                <div class="titel">总背景</div>
                            </div>
                            <el-descriptions :column="3" border size="small">
                                <el-descriptions-item label="背景颜色">
                                    <el-form-item prop="backgroundColor">
                                        <el-color-picker v-model="form.index.Content.backgroundColor"></el-color-picker>
                                    </el-form-item>
                                </el-descriptions-item>
                                <el-descriptions-item label="logo展示">
                                    <el-form-item prop="backgroundColor">
                                        <el-switch v-model="form.index.Content.Logo" active-color="#13ce66"
                                            inactive-color="#ff4949">
                                    </el-form-item>
                                </el-descriptions-item>
                                <el-descriptions-item label="背景图片">
                                    <el-form-item prop="backgroundColor">
                                        <div style="display: flex;">
                                            <div style="flex-shrink: 0; margin-right: 10px;">
                                                <div class="preview" v-show="form.index.Content.pic">
                                                    <el-image class="el-upload-list__item-thumbnail" style="width: 148px; height: 148px" :src="form.index.Content.pic" fit="contain"></el-image>
                                                    <span class="el-upload-list__item-actions">
                                                        <span @click="handlePictureCardPreview(form.index.Content.pic)"><i class="el-icon-zoom-in"></i></span>
                                                        <span @click="handleRemove()"><i class="el-icon-delete"></i></span>
                                                    </span>
                                                </div>
                                                <el-upload v-show="!form.index.Content.pic" class="upload-demo" :show-file-list="false" list-type="picture-card" action="" accept="image/*" :before-upload="uploadImage">
                                                    <i slot="default" class="el-icon-plus"></i>
                                                </el-upload>
                                            </div>
                                            <div style="width: 100%;">
                                                <el-form-item label="尺寸:" >
                                                    <el-select placeholder="请选择" filterable v-model.trim="form.index.Content.backgroundSize" style="width: 50%;">
                                                        <el-option v-for="(item,index) in Size" :key="index" :label="item.label" :value="item.value"></el-option>
                                                    </el-select>
                                                </el-form-item>
                                                <el-form-item label="平铺:" >
                                                    <el-select placeholder="请选择" filterable v-model.trim="form.index.Content.backgroundRepeat" style="width: 50%;">
                                                        <el-option v-for="(item,index) in Repeat" :key="index" :label="item.label" :value="item.value"></el-option>
                                                    </el-select>
                                                </el-form-item>
                                            </div>
                                        </div>
                                    </el-form-item>
                                </el-descriptions-item>
                            </el-descriptions>
                            <div class="table_titel">
                                <div class="titel">类目样式</div>
                            </div>
                            <el-descriptions :column="3" border size="small">
                                <el-descriptions-item label="字体颜色">
                                    <el-form-item prop="backgroundColor">
                                        <el-color-picker v-model="form.index.Icon.textColor"></el-color-picker>
                                    </el-form-item>
                                </el-descriptions-item>
                                <el-descriptions-item label="背景颜色">
                                    <el-form-item prop="backgroundColor">
                                        <el-color-picker v-model="form.index.Icon.backgroundColor"></el-color-picker>
                                    </el-form-item>
                                </el-descriptions-item>
                                <el-descriptions-item label="边框颜色">
                                    <el-form-item prop="backgroundColor">
                                        <el-color-picker v-model="form.index.Icon.backgroundColor"></el-color-picker>
                                    </el-form-item>
                                </el-descriptions-item>
                            </el-descriptions>
                            <div class="table_titel">
                                <div class="titel">导航栏样式</div>
                            </div>
                            <el-descriptions :column="3" border size="small">
                                <el-descriptions-item label="背景颜色">
                                    <el-form-item prop="backgroundColor">
                                        <el-color-picker v-model="form.index.Tabs.backgroundColor"></el-color-picker>
                                    </el-form-item>
                                </el-descriptions-item>
                                <el-descriptions-item label="字体颜色">
                                    <el-form-item prop="textColor">
                                        <el-color-picker v-model="form.index.Tabs.textColor"></el-color-picker>
                                    </el-form-item>
                                </el-descriptions-item>
                                <el-descriptions-item label="选中字体颜色">
                                    <el-form-item prop="selectColor">
                                        <el-color-picker v-model="form.index.Tabs.selectColor"></el-color-picker>
                                    </el-form-item>
                                </el-descriptions-item>
                            </el-descriptions>
                            <div class="table_titel">
                                <div class="titel">商品卡片</div>
                            </div>
                            <el-descriptions :column="2" border size="small">
                                <el-descriptions-item label="背景颜色">
                                    <el-form-item prop="backgroundColor">
                                        <el-color-picker v-model="form.index.Detail.backgroundColor"></el-color-picker>
                                    </el-form-item>
                                </el-descriptions-item>
                                <el-descriptions-item label="字体颜色">
                                    <el-form-item prop="themeColor">
                                        <el-color-picker v-model="form.index.Detail.themeColor"></el-color-picker>
                                    </el-form-item>
                                </el-descriptions-item>
                            </el-descriptions>
                        </el-tab-pane>
                        <el-tab-pane label="配置管理">配置管理</el-tab-pane>
                    </el-tabs>
                </div>
                <div style="display: flex; flex-direction: column; flex-shrink: 0;">
                    <div class="table_titel" style="flex-shrink: 0;">
                        <div class="titel">小程序预览</div>
                    </div>
                    <div style="background-color: aquamarine; width: 375px;height: 667px;">

                    </div>
                </div>
            </div>
            <el-form-item class="form-operation">
                <el-button @click="window.history.back()">返回</el-button>
                <el-button type="primary" :loading="loading" @click="submitForm('contract')">提交</el-button>
            </el-form-item>
        </el-form>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
    <script type="text/javascript" src="../../../js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="../../../js/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../js/vue.min.js"></script>
    <script type="text/javascript" src="../../../elementUI/index.js"></script>
    <script type="text/javascript" src="../../../js/utils.js"></script>
    <script type="text/javascript" src="../../../js/ID_Validity.js"></script>
    <script type="text/javascript" src="../../../js/compressor.js"></script>
    <script type="text/javascript" src="./js/Config.js"></script>
</body>

</html>